<template>
  <div class="album_container">
    <div class="header">
      <div class="title">专辑</div>
      <div class="search">
        <img src="/static/images/icon-search.png" alt="search">
      </div>
    </div>
    <div class="main_container" v-if="album!==null">
      <img :src="albumImgUrl" class="blurbg">
      <div class="info border-1px border-1px-after">
        <div class="photo">
          <img v-lazy="albumImgUrl">
          <div class="play_button" @click="play(0)">
            <img src="/static/images/icon-play.png">
          </div>
        </div>
        <div class="info_text">
          <p class="album_name">
            {{ album.name }}
            <span class="text_style">-{{ album.singername }}</span>
          </p>
          <p class="text_style">{{ album.list.length }}首歌曲</p>
          <p class="text_style">{{ album.genre }} {{ album.lan }}</p>
          <p class="text_style">发行时间：{{ album.aDate | dateFormat }}</p>
          <p class="text_style">唱片公司：{{ album.conpany }}</p>
        </div>
      </div>
      <div class="list">
        <ul>
          <li class="item border-1px border-1px-after"
            v-for="(item, index) in album.list" :key="index">
            <div class="music_info" @click="play(index)">
              <p class="music_name">{{ item.songorig }}</p>
              <p class="music_author">
                <span v-for="singer in item.singer" :key="singer.id">
                  {{ singer.name }}
                </span>
                <span>{{ item.albumdesc }}</span>
              </p>
            </div>
            <div class="action_button"
              @click="showMenu(index)"
              @touchend.prevent="showMenu(index)">
              <img src="/static/images/icon-...black.png">
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'album',
  data() {
    return {
      id: this.$route.params.id,
      album: null
    }
  },
  methods: {
    play(index) {
      const list = []
      this.album.list.forEach(item => {
        list.push({
          id: item.songid,
          mid: item.songmid,
          name: item.songorig,
          singer: item.singer,
          albummid: item.albummid
        })
      });
      this.$store.commit('setPlayList', {
        index,
        list
      })
      this.$store.commit('play')
    },
    showMenu(index){
      const that = this
      const options = {
        id: this.album.list[index].songid,
        mid: this.album.list[index].songmid,
        name: this.album.list[index].songorig,
        singer: this.album.list[index].singer,
        albummid: this.album.list[index].albummid
      }
      this.$store.dispatch('notifyActionSheet', {
        menus: {
          'title.noop': this.album.list[index].songorig +
                        `<br><span style="color:#666;font-size:12px;">${this.getSingerStr(this.album.list[index].singer)}</span>`,
          playAsNext: '下一首播放',
          addToPlayList: '添加到播放列表'
        },
        handler: {
          ['cancel']() {},
          ['playAsNext']() {
            that.$store.commit('addToPlayListAsNextPlay', options)
          },
          ['addToPlayList']() {
            that.$store.commit('addToPlayList', options)
          }
        }
      })
    },
    getSingerStr(val) {
      if(typeof val === 'string') {
        return val
      } else if(val instanceof Array){
        let singer = ''
        val.forEach(item => {
          singer = singer + item.name + ' '
        })
        return singer
      }
    }
  },
  mounted() {
    window.scrollTo(0, 0)
  },
  created() {
    this.$store.dispatch('getAlbum', this.id).then(res => {
      this.album = res.data.data
    })
  },
  computed: {
    albumImgUrl() {
      return 'http://y.gtimg.cn/music/photo_new/T002R300x300M000' + this.id + '.jpg?max_age=2592000'
    }
  }
}
</script>

<style lang="less" scoped>
  * {
    margin: 0;
    padding: 0;
  }
  .album_container {
    width: 100%;
    max-width: 68vh;
    min-height: 100%;
    background-color: #fff;
    position: absolute;
    top: 40px;
    z-index: 2;
    .header {
      width: 100%;
      max-width: 68vh;
      height: 50px;
      background: rgba(255, 255, 255, .8);
      position: fixed;
      top: 40px;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        margin-left: 10px;
        font-size: 16px;
      }
      .search {
        width: 30px;
        height: 30px;
        margin: 10px;
        img {
          width: 30px;
        }
      }
    }
    .main_container {
      margin-top: 50px;
      margin-bottom: 100px;
      .blurbg {
        width: 100%;
        max-height: 68vh;
        position: absolute;
        top: 0;
        left: 0;
        filter: blur(30px);
      }
      .info {
        height: 110px;
        background: rgba(255, 255, 255, 0.8);
        padding-left: 15px;
        padding-bottom: 10px;
        box-sizing: content-box;
        display: flex;
        .photo {
          width: 110px;
          height: 110px;
          position: relative;
          img {
            width: 110px;
            height: 110px;
            -webkit-user-drag: none;
          }
          .play_button {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .5);
            position: absolute;
            bottom: 10px;
            right: 10px;
            z-index: 1;
            cursor: pointer;
            img {
              width: 15px;
              height: 15px;
              margin: 7.5px;
              margin-left: 9px;
            }
          }
        }
        .info_text {
          padding-left: 5px;
          .album_name {
            font-size: 16px;
            color: #000;
          }
          .text_style {
            font-size: 12px;
            color: #8f8f8f;
            line-height: 18px;
          }
        }
      }
      .list {
        background: rgba(255, 255, 255, .8);
        ul {
          list-style: none;
          li.item {
            padding: 5px 10px 5px 15px;
            background: rgba(255, 255, 255, .8);
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            .music_info {
              width: 100%;
              margin-right: 20px;
              display: flex;
              flex-direction: column;
              .music_name {
                font-size: 16px;
                color: #000;
                line-height: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .music_author {
                span {
                  margin-right: 5px;
                }
              }
            }
            .action_button {
              width: 20px;
              height: 20px;
              img {
                width: 20px;
              }
            }
          }
        }
      }
    }
  }

  .border-1px {
    position: relative;
  }
  .border-1px::before {
    top: 0;
  }
  .border-1px::after {
    bottom: 0;
  }
  .border-1px-after::after {
    content: '';
    display: block;
    width: 100%;
    border-top: 1px solid #d0d0d0;
    position: absolute;
    left: 0;
  }
</style>
